import {Component, OnInit, Input, Output, AfterViewInit, EventEmitter, OnChanges, SimpleChanges} from '@angular/core';
import {ProjectItemModel} from "../../model/project-item.model";
import {Router} from "@angular/router";
declare var $:any;

@Component({
  selector: 'wf-multi-swiper',
  templateUrl: './multi-swiper.component.html',
  styleUrls: ['./multi-swiper.component.scss']
})
export class MultiSwiperComponent implements OnInit,AfterViewInit,OnChanges {


  @Input('swiper-options') options:Object;
  @Input('swiper-list')pictures:Array<any>;
  @Input('project') item: ProjectItemModel = new ProjectItemModel();
  @Output('itemClick') public itemClick = new EventEmitter();
  localOptions:any = {
    leftArrow: 'url(assets/images/index_left.png)',
    rightArrow: 'url(assets/images/index_right.png)',
    arrowSize: 30,
    arrowPadding: 5,
    multiNum: 1,
    textOnImg: false,
    textOnImgFilter: 'rgba(0,0,0,0.8)',
    textBelowImg: false,
    width: 300,
    height: 260,
    imagePadding: 20,

  };
  info:any = {
    left: 0,
    currentIndex: 0
  };


  ngOnChanges(changes: SimpleChanges): void {
    this.refreshBanner();
  }


  defaultImage:string = 'http://placehold.it/1920x670';
  banners:any = [];

  constructor(private router: Router) {
  }

  ngAfterViewInit():void {
    let bindEvent = ()=> {
      let options = this.localOptions;
      let unitSize = options.width + options.imagePadding * 2;
      $('.multi-swiper-container .arrow-left').on('click', ()=> {
        if (this.info.currentIndex > 0) {
          this.info.left = this.info.left + unitSize;
          --this.info.currentIndex;
        }
      });
      $('.multi-swiper-container .arrow-right').on('click', ()=> {
        if (this.info.currentIndex + options.multiNum < this.banners.length) {
          this.info.left = this.info.left - unitSize;
          ++this.info.currentIndex;
        }
      });
    };
    bindEvent();
  }

  ngOnInit() {
    Object.keys(this.options).forEach((key)=> {
        this.localOptions[key] = this.options[key]
      }
    );
    this.localOptions.arrowPadding = this.localOptions.arrowPadding + this.localOptions.arrowSize;
    this.refreshBanner();
  }

  refreshBanner(){
    if (this.pictures.length >= this.localOptions.multiNum) {
      let list = this.pictures;
      list.forEach((theItem)=> {
        if (theItem == undefined) {
          theItem = {img: this.defaultImage};
        }
        else if (theItem.img == undefined || theItem.img == '') {
          theItem.img = this.defaultImage;
        }
      })
      this.banners = list;
    } else {
      let list = new Array(this.localOptions.multiNum);
      list.forEach((theItem)=> {
        theItem = {img: this.defaultImage};
      })
      this.pictures.forEach((pic, index)=> {
        list[index] = pic;
      })
      this.banners = list;
    }
  }

  clickItem(banner:any){
    this.itemClick.emit(banner);
  }

}
